<template>
  <homeHead />
  <div class="home">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item class="item" v-for="i in 4">
          <span>秋季特惠 | 九寨沟</span>
          <span>深秋时节，感受童话世界般的绝美景色</span>
          <img src="../assets/ima.jpg" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="recommend">
      <div class="recommend-head">
        <span>当季推荐</span>
        <span>右滑更多</span>
      </div>
      <div class="recommend-contain">
        <div class="item" v-for="i in 5" :key="i">
          <img src="../assets/ima.jpg" alt="">
          <div class="item-detail">
            <span class="title">张家界国家森林公园</span>
            <span class="local">湖南省张家界市</span>
            <div class="evaluate">
              <van-rate size="0.3rem" gutter="0.02rem" v-model="grade" readonly allow-half />
              <span>¥ 288</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ai-plan">
      <div class="ai-plan-head">
        <span>AI 智能规划</span>
        <span>选择旅行风格，让 AI 为您定制完美行程</span>
      </div>
      <!-- <div class="ai-plan-class">
        <div class="item" v-for="i in 4" :key="i">
          <i class="iconfont icon-xihuan"></i>
          <span>家庭出游</span>
        </div>
      </div> -->
      <div class="ai-plan-begin">
        <span @click="toAiPlan">开始 AI 规划</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import homeHead from '../components/homeHead.vue';
import { ref } from 'vue';
const grade = ref(3)

// 跳转ai规划界面
const router = useRouter()
const toAiPlan = () => {
  router.push('/aiplan')
}
</script>

<style lang="less" scoped>
.home{
  height: calc(100vh - 3.2rem);
  overflow-y: scroll;
  padding: 0 0.43rem;
  .banner{
    margin-bottom: 0.5rem;
    .my-swipe{
      .item{
        overflow: hidden;
        height: 5.1rem;
        position: relative;
        img{
          width: 100%;
        }
        span{
          position: absolute;
        }
        span:first-child{
          font-weight: 500;
          font-size: 18px;
          color: #FFFFFF;
          line-height: 28px;
          display: inline-block;
          margin-top: 3.3rem;
          margin-left: 0.42rem;
        }
        span:nth-child(2){
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 20px;
          display: inline-block;
          margin-left: 0.42rem;
          margin-top: 4.1rem;
        }
      }
    }
  }
  .recommend{
    margin-bottom: 0.64rem;
    width: 100%;
    &-head{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.4rem;
      span:first-child {
        font-weight: 600;
        font-size: 18px;
        color: #000000;
        line-height: 28px;
      }
      span:nth-child(2){
        font-weight: 400;
        font-size: 14px;
        color: #3176FF;
        line-height: 20px;
      }
    }
    &-contain{
      display: flex;
      overflow-x: auto;
      .item{
        width: 4.1rem;
        flex: 0 0 auto;
        margin-right: 0.5rem;
        overflow: hidden;
        border-radius: 16px;
        box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
        img{
          width: 100%;
        }
        &-detail{
          padding: 8px 12px;
          .title{
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-weight: 550;
            font-size: 0.32rem;
            color: #000000;
            line-height: 21px;
            margin-bottom: 1px;
            display: inline-block;
          }
          .local{
            display: inline-block;
            margin-bottom: 0.1rem;
            font-weight: 400;
            font-size: 0.28rem;
            color: #6B7280;
            line-height: 16px;
          }
          .evaluate{
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
              font-weight: 400;
              font-size: 0.32rem;
              color: #3176FF;
              line-height: 20px;
            }
          }
        }
      }
    }

  }
  .ai-plan{
    background: linear-gradient( 90deg, #3176FF 0%, #2DD4BF 100%);
    border-radius: 16px;
    padding: 0.43rem;
    box-sizing: border-box;
    &-head{
      margin-bottom: 0.43rem;
      span:first-child{
        font-weight: 500;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 28px;
        margin-bottom: 0.2rem;
        display: inline-block;
      }
      span:nth-child(2){
        display: inline-block;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 20px;
      }
    }
    &-class{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 0.32rem;
      row-gap: 0.32rem;
      .item{
        color: #fff;
        padding: 12px 35px;
        background: rgba(255,255,255,0.2);
        border-radius: 8px;
        font-size: 0.37rem;
        display: flex;
        justify-content: center;  
        align-items: center;
        .iconfont{
          margin-right: 3px;
        }
      }
    }
    &-begin{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.43rem;
      border-radius: 8px;
      color: white;
      background: rgba(255,255,255,0.2);
      padding: 12px;
      box-sizing: border-box;
      span{
        font-size: 18px;
      }
    }
  }
}
</style>